<template>
	<view>
		<view class="comments-content" v-for="comments in commentsList" :key="comments._id">
			<comments-box :comments="comments"></comments-box>
		</view>
		<uni-load-more v-if="commentsList.length === 0 || commentsList.length > 5" iconType="snow" :status="loading"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				articleId: '',
				commentsList: [],
				page: 1,
				pageSize: 2,
				snow: '',
				loading: 'loading'
			}
		},
		onLoad(query) {
			this.articleId = query.id
			this.getComments()
		},
		onReachBottom() {
			if(this.loading === 'noMore') return
			this.page++
			this.getComments()
		},
		methods: {
			getComments(articleId) {
				this.$api.get_comments({
					articleId: this.articleId,
					page: this.page,
					pageSize: this.pageSize
				}).then((res) => {
					const { data } = res
					if(data.length === 0){
						this.loading = 'noMore'
					}
					const commentsList = this.commentsList
					this.commentsList = commentsList.concat(data)
				})
			}
		}
	}
</script>

<style lang="scss">
	.comments-content {
		padding: 0 15px;
	}
</style>
